<template>
    <div class="tag-main">
        <el-tabs v-model="activeTable" type="card" 
            @tab-remove="removeTab" 
            @tab-change="changeHandle"
            style="max-width:1138px;flex: 1;"
        >
            <el-tab-pane :closable="item.path !== '/home'" 
                v-for="item in tabsList" 
                :key="item.path" 
                :label="item.title"
                :name="item.path">
            </el-tab-pane>
        </el-tabs>
        <el-dropdown @command="delHandle">
            <span class="el-dropdown-link">
                <el-icon>
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const route = useRoute()
const activeTable = ref(route.path)

onBeforeRouteUpdate((to, from) => {
    // 将新的路由地址设置为激活项
    activeTable.value = to.path

    // 向数组中追加菜单
    addTab({
        title: to.meta.title,
        path: to.path
    })
})
// 标签数据源
const tabsList = ref([
    {
        title: '后台首页',
        path: '/home'
    }
])

// 初始化tabs标签的方法
function initTabList(){
    const isTab = JSON.parse(window.sessionStorage.getItem("tabList"))
    if(isTab){
        tabsList.value = isTab
    }
}
initTabList()

const addTab = (obj) => {
    const isTab = tabsList.value.findIndex(item => item.path === obj.path) == -1
    if(isTab){
        tabsList.value.push(obj)
    }
    window.sessionStorage.setItem("tabList", JSON.stringify(tabsList.value))
}

// 移除事件
const removeTab = (path) => {
    // 要删除的路由地址
    console.log(path)
    // 获取当前激活的路由地址
    let istabPath = activeTable.value
    // 获取菜单数据源
    const tabs = tabsList.value
    if(path == istabPath){
        tabs.forEach((item, index) => {
            if(item.path === path){
                // 找到要删除的选项卡
                const nextTab = tabs[index+1] || tabs[index-1]
                if(nextTab){
                    istabPath = nextTab.path
                }
            }
        })
    }
    // 修改默认激活选项
    activeTable.value = istabPath
    tabsList.value = tabsList.value.filter(item => item.path !== path)
    // 重新设置本地存储
    window.sessionStorage.setItem("tabList", JSON.stringify(tabsList.value))
}

// 切换事件
const changeHandle = (path) => {
    activeTable.value = path
    router.push(path)
}

// 批量删除Tabs标签
const delHandle = (res) => {
    if(res === 'closeOther'){
        // 关闭其他
        // 保留首页和当前激活页
        tabsList.value = tabsList.value.filter(item => item.path =='/home' || item.path === activeTable.value)

    }else if(res === 'closeAll'){
        // 关闭所有
        activeTable.value = '/home'
        tabsList.value = [{
            title: '后台首页',
            path: '/home'
        }]
    }
    // 重新设置本地存储
    window.sessionStorage.setItem("tabList", JSON.stringify(tabsList.value))
}

</script>

<style lang='less' scoped>
.tag-main {
    display: flex;
    background: #dbdbdb;
    overflow: hidden;
    padding-top: 7px;
    padding-bottom: 2px;
}
.el-dropdown {
    background: #fff;
    width: 30px;
    height: 34px;
    border-radius: 4px;
    margin-left: auto;
    display: flex;
    margin-right: 10px;
    // 水平方向居中
    justify-content: center;
    line-height: 43px;
}
 
:deep(.el-tabs__header) {
    margin: 0px;
}
:deep(.el-tabs__nav) {
    border: 0 !important
}
:deep(.el-tabs__item) {
    border: 0 !important;
    background: #fff;
    margin-left: 10px;
    height: 34px;
    line-height: 34px !important;
    border-radius: 4px;
}
:deep(.el-tabs__header) {
    border: none !important
}
</style>
